import './login.css'
import { Input } from 'antd'
import React from 'react'
import { userLogin } from '../../api/api'
import { useCallback, useState } from 'react'
import title from '../../assets/title.png'
import { Navigate, useNavigate } from 'react-router-dom'

function Login() {
  const [passwordVisible, setPasswordVisible] = React.useState(false)
  const [mobile, setMobile] = useState('')
  const [password, setPassword] = useState('')
  const navigate = useNavigate()
  const handleMobileChange = (val) => {
    setMobile(val.target.value)
  }
  const handlePasswordChange = (val) => {
    setPassword(val.target.value)
  }

  const login = () => {
    userLogin({
      mobile: mobile,
      password: password,
    }).then((res) => {
      if (res.code == 200) {
        localStorage.setItem('token', res.data.kitcheninfo.token)
        localStorage.setItem('nickname', res.data.kitcheninfo.nickname)
        navigate('/layout/order')
      }
    })
  }
  const isLogin = false
  if (isLogin) return <Navigate to="/" replace />
  return (
    <div className="loginbox flex-cen">
      <div className="loginContent flex-col">
        <img src={title} className="title" />
        <div className="mt60 iptbox flex-cen">
          <Input
            value={mobile}
            onChange={handleMobileChange}
            placeholder="请输入账号"
            styles={{ border: 'none' }}
          />
        </div>
        <div className="mt40 iptbox flex-cen">
          <Input.Password
            value={password}
            onChange={handlePasswordChange}
            placeholder="请输入密码"
            styles={{ border: 'none', background: '#f5f5f5' }}
            visibilityToggle={{
              visible: passwordVisible,
              onVisibleChange: setPasswordVisible,
            }}
          />
        </div>
        <div className="btn mt40" onClick={login}>
          登录
        </div>
      </div>
    </div>
  )
}
export default Login
